<template>
  <div class="">
    <div class="header">
      <div class="left">
        <img :src="data.avatar" alt="" />
      </div>
      <span style="font-size: 15px">&emsp;{{ data.real_name }}</span>
    </div>
    <div class="tabs">
      <ul>
        <li
          v-for="(item, i) in tabs"
          :key="i"
          @click="flag = i"
          :class="i == flag ? 'active' : ''"
        >
          {{ item }}
        </li>
      </ul>
      <div class="jianjie" v-if="flag == 0">
        <p>老师简介</p>
        <span>{{ data.introduction }}</span>
      </div>
      <div v-else>
        <myclassList v-for="item in list" :key="item.id" :item="item"></myclassList>
      </div>
    </div>
  </div>
</template>

<script>
import { getClassDetail,getTeacDetail } from "../../utils/api";
import myclassList from '../../components/class/mydetaillist.vue'
export default {
  data() {
    return {
      id: this.$route.query.id,
      flag: 0,
      tabs: ["讲师介绍", "主讲课程"],
      list:[],
      data:[]

    };
  },
  mounted() {
    getClassDetail().then(res=>{
      this.list=res.data.list
      // console.log(this.list);
    }),
    // console.log(this.item);
    getTeacDetail(this.id).then(res=>{
      // console.log(res.data.teacher);
      this.data=res.data.teacher
    })
  },
  methods: {},
  components: {
    myclassList
  },
};
</script>

<style lang='scss' scoped>
.header {
  height: 130px;
  padding: 25px 30px;
  box-sizing: border-box;
  display: flex;
  .left {
    flex-basis: 25%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  span {
    flex-basis: 75%;
    height: 100%;
  }
}
.tabs {
  height: 45px;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  .active {
    border-bottom: 3px solid red;
  }
  ul {
    height: 100%;
    padding-top: 10px;
    display: flex;
    li {
      flex-basis: 50%;
      text-align: center;
      line-height: 25px;
    }
  }
}
.jianjie {
  padding: 0 15px;
  p {
    margin: 15px 0;
    color: #ccc;
  }
}
</style>
